<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="二级机构" prop="departmentOrgId">
            <el-select v-model="form.departmentOrgId" placeholder="请选择二级机构" class="form_short" @change="handleLabChange">
              <el-option v-for="item in secondOrgList" :key="item.orgName" :label="item.orgName"
                :value="item.orgId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="实验中心"  prop="laboratoryCenteryId">
            <el-select v-model="form.laboratoryCenteryId" placeholder="请选择实验中心" class="form_short" >
              <el-option v-for="item in laboratoryCenteryList" :key="item.orgName" :label="item.orgName"
                :value="item.orgId">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
      </el-row>
      <el-row>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="实验室" prop="laboratoryId">
             <el-select v-model="form.laboratoryId" placeholder="请选择实验室" class="form_short" @change="handlaboratoryIdChange">
              <el-option v-for="item in secondOrgLabList" :key="item.orgName" :label="item.orgName"
                :value="item.orgId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="实验地点" prop="laboratoryAddress">
            <el-input v-model="form.laboratoryAddress" placeholder="请输入实验地点" class="form_short"/>
          </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="项目类型" prop="projectType">
            <el-select v-model="form.projectType" placeholder="请选择项目类型" class="form_short">
              <el-option
                v-for="dict in developmentProjectTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
       </el-col>
        <el-col :span="11">
          <el-form-item label="开放形式" prop="openForm">
            <el-select v-model="form.openForm" placeholder="请选择开放形式" class="form_short">
              <el-option
                v-for="dict in openFormOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="申报学时" prop="reportingHours">
            <el-input v-model="form.reportingHours" placeholder="请输入申报学时" class="form_short"/>
          </el-form-item>
       </el-col>
        <el-col :span="11">
          <el-form-item label="指导学生人数" prop="reportInstructedStudentsNumber">
            <el-input v-model="form.reportInstructedStudentsNumber" placeholder="请输入申报指导学生人数" oninput="value=value.replace(/[^\d]/g,'')" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="申报分组数" prop="reportGroupNumber">
            <el-input v-model="form.reportGroupNumber" placeholder="请输入申报分组数" oninput="value=value.replace(/[^\d]/g,'')" class="form_short"/>
          </el-form-item>
       </el-col>
        <el-col :span="11">
          <el-form-item label="分组每组人数" prop="reportGroupPerNumber">
            <el-input v-model="form.reportGroupPerNumber" placeholder="请输入申报分组每组人数"  oninput="value=value.replace(/[^\d]/g,'')" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="申报耗材费" prop="reportConsumablesFee">
            <el-input v-model="form.reportConsumablesFee" placeholder="请输入申报耗材费" oninput="value=value.replace(/[^\d]/g,'')" class="form_short"/>
            <template slot="append">万元</template>
          </el-form-item>
       </el-col>
        <el-col :span="11">
          <el-form-item label="成果主要形式" prop="experimentalResultsMainForm">
            <el-select v-model="form.experimentalResultsMainForm" placeholder="请选择成果主要形式" class="form_short">
              <el-option
                v-for="dict in mainFormsExperimentalResultsOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="form.experimentalResultsMainForm" placeholder="请输入实验成果主要形式" class="form_short"/> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人工号" prop="projectOwnerId">
            <el-input v-model="form.projectOwnerId" placeholder="请输入工号" type="string" size="small" class="form_short" @blur="searchUser" @keyup.enter.native="searchUser"/>
         </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="负责人姓名" prop="projectContactLeader">
            <el-input v-model="form.projectContactLeader" placeholder="输入工号自动填写" disabled class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人职称" prop="ownerTitle">
            <el-input v-model="form.ownerTitle" placeholder="请输入职称" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入电话" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人邮箱" prop="ownerEmail">
            <el-input v-model="form.ownerEmail" placeholder="请输入邮箱" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {searchEmployee} from "@/api/labdata/employee";
import {getOrgByFunctionOpt,listSecondOrgLab} from "@/api/labdata/orgnization";

  export default {
    name: "ProjectDevelopmentProject",
    data() {
      return {
        //实验中心
        laboratoryCenteryList:[],
        // 开发项目类型
        developmentProjectTypeOptions:[],
        // 开放形式
        openFormOptions:[],
        // 实验成果主要形式
        mainFormsExperimentalResultsOptions:[],
         //二级机构
      secondOrgList: [],
      //二级机构下的实验室
      secondOrgLabList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "负责人电话不能为空", trigger: "blur" }
        ],
        siteLocation: [
          { required: true, message: "实验室场地位置不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入负责人邮箱', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        contactPhone: [
         {  message: '请输入负责人电话', trigger: 'blur' },
         {
           pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          }
        ],

        }
      };
    },
    props:{
      developmentProject:Object,
    },
    created() {
      getOrgByFunctionOpt(3).then(response => {
        this.laboratoryCenteryList = response.data
      });
    this.getDicts("development_project_type").then(response => {
      this.developmentProjectTypeOptions = response.data;
    });
     this.getDicts("open_form").then(response => {
      this.openFormOptions = response.data;
    });
    this.getDicts("main_forms_experimental_results").then(response => {
      this.mainFormsExperimentalResultsOptions = response.data;
    });
      getOrgByFunctionOpt(2).then(response => {
      this.secondOrgList = response.data;
      this.$forceUpdate();
    });
    listSecondOrgLab( this.developmentProject.departmentOrgId).then(response => {
          this.secondOrgLabList = response.data;
          this.$forceUpdate();
     });
      if(this.developmentProject){
        this.form = this.developmentProject;
        this.searchUser();
      }else{
        this.form  = {};
      }

    },
    methods: {
      getDevelopmentProject(){
        return this.form;
      },

      // 输入工号搜索
      searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectContactLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectContactLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectContactLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

      handleLabChange(item) {
      if (item) {
        this.form.laboratoryId = null;
        listSecondOrgLab(item).then(response => {
          this.secondOrgLabList = response.data;
        });
      }
    },

    handlaboratoryIdChange(){
       //强制刷新
       this.$forceUpdate();
    }



    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
</style>
